<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram of a Charged Rod</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    border: 1px solid #ccc;
    background-color: #fff;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="400"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Define coordinates and dimensions
    const cx = 250;
    const cy = 200;
    const rodLength = 300;
    const rodHeight = 8;
    const pPrimeY = cy - 120;
    const pDistance = 80;

    const Ax = cx - rodLength / 2;
    const Bx = cx + rodLength / 2;
    const Px = Bx + pDistance;

    // --- Drawing ---

    // Set default text styles
    ctx.font = '20px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillStyle = 'black';
    ctx.strokeStyle = 'black';

    // Draw the rod AB (as a rectangle)
    ctx.fillRect(Ax, cy - rodHeight / 2, rodLength, rodHeight);

    // Draw the line from B to P (as a thin line)
    ctx.beginPath();
    ctx.lineWidth = 1.5;
    ctx.moveTo(Bx, cy);
    ctx.lineTo(Px, cy);
    ctx.stroke();

    // Draw point P'
    ctx.beginPath();
    ctx.arc(cx, pPrimeY, 3, 0, 2 * Math.PI);
    ctx.fill();
    
    // Draw point P
    ctx.beginPath();
    ctx.arc(Px, cy, 3, 0, 2 * Math.PI);
    ctx.fill();

    // Draw dashed line OP'
    ctx.beginPath();
    ctx.setLineDash([5, 5]);
    ctx.lineWidth = 1.5;
    // The line starts from the top edge of the rod
    ctx.moveTo(cx, cy - rodHeight / 2);
    ctx.lineTo(cx, pPrimeY);
    ctx.stroke();
    ctx.setLineDash([]); // Reset to solid lines

    // Draw dimension line for l
    const dimY = cy + 50;
    const tickHeight = 10;
    ctx.lineWidth = 1;

    // Horizontal line
    ctx.beginPath();
    ctx.moveTo(Ax, dimY);
    ctx.lineTo(Bx, dimY);
    ctx.stroke();
    // Left tick
    ctx.beginPath();
    ctx.moveTo(Ax, dimY - tickHeight / 2);
    ctx.lineTo(Ax, dimY + tickHeight / 2);
    ctx.stroke();
    // Right tick
    ctx.beginPath();
    ctx.moveTo(Bx, dimY - tickHeight / 2);
    ctx.lineTo(Bx, dimY + tickHeight / 2);
    ctx.stroke();
    
    // --- Labels ---

    // Label A
    ctx.fillText('A', Ax - 15, cy);
    
    // Label B
    ctx.fillText('B', Bx, cy - 20);
    
    // Label O
    ctx.fillText('O', cx, cy + 20);

    // Label P'
    ctx.fillText("P'", cx, pPrimeY - 20);
    
    // Label P
    ctx.fillText('P', Px + 15, cy);

    // Label 'l'
    ctx.font = 'italic 20px Arial';
    ctx.fillText('l', cx, dimY + 20);

    // Caption
    ctx.font = '20px "SimSun", "Songti SC"';
    ctx.fillText('习题 7-29 图', cx, cy + 150);

</script>
</body>
</html>